<template>
    <scroll-view 
        :scroll-y="true"
        class="cfky_cp">
        <view class="container">
            <u-form :model="form" ref="uForm" label-width="fit-content">
                <view class="one">
                    <view class="top">
                        <u-form-item label="姓名">
                            <u-input :placeholder="String(user.name)" :disabled="true"/>
                        </u-form-item>
                        <u-form-item label="年龄">
                            <u-input :placeholder="String(user.age)" :disabled="true"/>
                        </u-form-item>
                    </view>
                </view>
                <view class="title el-after">
                    药品
                </view>
                <view class="two">
                    <u-table>
                        <u-tr>
                            <u-th>药品名称</u-th>
                            <u-th>规格</u-th>
                            <u-th>剂型</u-th>
                            <u-th>操作</u-th>
                        </u-tr>
                        <u-tr 
                            v-for="(item,index) in medicineList" 
                            :key="index">
                            <u-td>{{item.Dname}}</u-td>
                            <u-td>{{item.Dtype}}</u-td>
                            <u-td>{{item.DjiXing}}</u-td>
                            <u-td>
                                <u-button 
                                    type="error"
                                    size="mini"
                                    @click="deleteMedicine(item)">
                                    删除
                                </u-button>
                            </u-td>
                        </u-tr>
                    </u-table>
                    <u-button
                        type="success"
                        shape="circle"
                        size="medium"
                        :ripple="true"
                        @click="$refs.SelectMedicineCp.setShowState(true)">
                        添加药品
                    </u-button>
                </view>
                <view class="three">
                    <u-form-item label="药物禁忌和用法" prop="yongfa" label-position="top" :border-bottom="false" :label-style="{lineHeight:1}">
                        <u-input v-model="form.yongfa" type="textarea" :auto-height="true"/>
                    </u-form-item>
                </view>
                <view class="three">
                    <u-form-item label="医嘱" prop="yizhu" label-position="top" :border-bottom="false" :label-style="{lineHeight:1}">
                        <u-input v-model="form.yizhu" type="textarea" :auto-height="true"/>
                    </u-form-item>
                </view>
                <view class="bt_list">
                    <u-button 
                        type="success"
                        shape="circle"
                        @click="onAdd">
                        开药
                    </u-button>
                    <u-button
                        type="error"
                        shape="circle"
                        @click="removeForm">
                        初始化
                    </u-button>
                </view>
            </u-form>
            <SelectMedicineCp
                ref="SelectMedicineCp"
                @onSelect="onSelectMedicine">
            </SelectMedicineCp>
            <u-toast ref="uToast" />
        </view>
    </scroll-view>
</template>

<script>
//处方开药
import SelectMedicineCp from "@/components/public/SelectMedicine";
import {addPrescribe} from "@/common/api";
export default {
    components:{
        SelectMedicineCp,
    },
    props:{
        user:{ //病人数据
            type:Object,
            default:()=>{
                return {};
            },
        },
        Rid:{ //挂号单
            type:String,
            default:'',
        },
        show:{ //当前滑块时候显示
            type:Boolean,
            default:false,
        },
    },
    data() {
        return {
            form: {
                yizhu: '',
                yongfa: '',
            },
            //数据验证规则
            rules:{
            	yizhu:[
            		{
            			required: true,
            			message: '不能为空',
            			trigger: ['blur', 'change'],
            		}
            	],
                yongfa:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	}
                ],   
            },
            medicineList:[],  //所选药品数据
        }
    },
    onReady() {
    	this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        onSelectMedicine(data){  //药品选择后的回调事件
            for(let item of this.medicineList){
                if(item.Dname == data.Dname) return; //不能添加相同的药品
            }
            this.medicineList.push(data);
        },
        deleteMedicine(item){  //删除一个已选择的药品
            this.medicineList = this.medicineList.filter(_item=>{
                return _item.Dname != item.Dname;
            });
        },
        onAdd(){  //处方开药
            this.$refs.uForm.validate(valid => {
                if (valid){
                    if(this.medicineList.length === 0){
                        this.$refs.uToast.show({
                            title: "请选择药品",
                            position:'top',
                            type: 'error',
                        });
                        return;
                    }
                    addPrescribe(
                        {
                            ...this.form,
                            Rid:this.Rid,
                            kid:this.user.kid,
                            RealDocter:this.$store.state.user.name,
                            yaopinName:this.medicineList.map(item=>{
                                return item.dname;
                            }).join("-"),
                            zhuangtai:"no",
                        },
                    ).then(data=>{
                        this.$refs.uToast.show({
                            title: '开药成功',
                            position:'top',
                            type: 'success',
                        });
                    }).catch(msg=>{
                        this.$refs.uToast.show({
                            title: msg,
                            position:'top',
                            type: 'error',
                        });
                    });
                }
            });
        },
        removeForm(){  //初始化
            this.$refs.uForm.resetFields();
            for(let index in this.form){
                this.form[index] = "";
            }
            this.medicineList = [];
        },
    },
}
</script>
<style scoped lang="scss">
    .cfky_cp{
        height: calc(100vh - 90rpx);
        .container{
            padding: 35rpx;
            box-sizing: border-box;
            .title{
                width: fit-content;
                font-size: 45rpx;
                color: #000000;
                font-weight: bold;
                margin-bottom: 35rpx;
            }
            .one{
                padding: 0 25rpx 25rpx 25rpx;
                border-radius: 2px;
                box-sizing: border-box;
                border: 1px solid #e4ebef;
                margin-bottom: 35rpx;
                .top{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                }
            }
            .two{
                padding: 15rpx;
                box-sizing: border-box;
                border-radius: 2px;
                border: 1px solid #e4ebef;
                display: grid;
                grid-template-columns: 1fr;
                grid-gap:15rpx;
                .u-button{
                    display: block;
                }
            }
            .three{
                margin-top: 35rpx;
                box-sizing: border-box;
                .u-form-item{
                    width: 100%;
                    padding: 0 15rpx;
                    padding-top: 15rpx;
                    box-sizing: border-box;
                    border: 1px solid #e4ebef;
                    border-radius: 2px;
                    display: block;
                }
            }
            .bt_list{
                margin-top: 35rpx;
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: 35rpx;
                *{
                    width:100%;
                }
            }
        }
    }
</style>
